<template>
    <div>
        <InterHead :bgc="bgc" :boolen="boolen"></InterHead>
        <Interlist></Interlist>
        <Interlist2></Interlist2>
        <Interlist3></Interlist3>
        <div class="tj" :class="bgc1">
            <span @click="fun1">精选推荐</span>
            <div @click="fun2">
              <img src="https://gw.alicdn.com/imgextra/i1/O1CN01tFp7Vp1wTZacYlKHM_!!6000000006309-2-tps-416-157.png_.webp" alt="">
            </div>
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        

        <InterFoot></InterFoot>
    </div>
</template>

<script>
import InterHead from '../Inter/InterHead.vue';
import Interlist from '../Inter/Interlist.vue';
import Interlist2 from '../Inter/Interlist2.vue';
import Interlist3 from '../Inter/Interlist3.vue';
import InterFoot from '../Inter/InterFoot.vue';
export default {
    data(){
        return{
            bgc:"",
            boolen:true,
            bgc1:""
        }
    },
    components:{
        InterHead,
        Interlist,
        Interlist2,
        Interlist3,
        InterFoot
    },
    methods:{
        fun1(){
            this.$router.push(`/InterPage/pages2`).catch(err => { })
        
        },
        fun2(){
            this.$router.push(`/InterPage/pages3`).catch(err => { })
        }
    },
    mounted(){
        window.onscroll = () => {
            if (document.documentElement.scrollTop > 50) {
                this.bgc = "flagimg"

            } else {
                this.bgc = ''
            }
            if (document.documentElement.scrollTop > 800) {
                this.bgc1 = "bgcs"
                this.boolen = false
            } else {
                this.bgc1 = ""
                this.boolen = true
            }
            // console.log(document.documentElement.scrollTop);
        }
    }
}
</script>

<style scoped>
.tj{
    width: 100%;
    height: 44px;
    display: flex;
}
.tj>span{
    width: 50%;
    color: #7C48DB;
    font-size: 17px;
    text-align: center;
    line-height: 44px;
}
.tj>div{
    width: 50%;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tj>div img{
    width: 42.36px;
    height: 16px;
}
.bgcs{
    position: fixed;
    top: 44px;
    z-index: 1000;
    background: #f5f5f5;
    color: #fff;
}
</style>